<template id='publishTrans'>
  <f7-page>
    <f7-navbar title="发布司机运输" back-link="返回">
    </f7-navbar>
    <f7-list form>
      <f7-list-button @click="delogSetPrductType">        
        {{!models.productDeail.product ? '设置产品分类' : models.productDeail.product_chn}}
      </f7-list-button> 

      <f7-list-button @click="delogSetPrductCategory" title='添加产品'>
      <!-- v-if='models.productDeail.product'  -->
        
      </f7-list-button> 
      <f7-list-item v-for="x in models.product_categories[0]['product_name']">
        <div> {{x.name}}</div>
        <div>
          <span v-for="y in x.attribute">{{y.name}} {{y.value}}</span>          
        </div>
        <div>
          运输重量：单位
        </div>
        <div>{{x.amount}} <input type="number" name="" v-model="x.amount" /></div>
      </f7-list-item>

      <f7-list-item title="提货地址" @click="selectAdds('send')">
        {{models.send ? models.send._id : ''}}
      </f7-list-item>
      <f7-list-item title="收货地址" @click="selectAdds('receive')">
        {{models.receive ?models.receive._id:''}}
      </f7-list-item>

      <f7-list-item>
        <label>运费（元/吨）</label>
        <input type="number" placeholder="0" v-model="models.price" />
      </f7-list-item>
      <f7-list-item>
        <label>信息费（元/车）</label>
        <input type="number" placeholder="0" v-model="models.tip_price" />
      </f7-list-item>

      <f7-list-item title="司机接单截止时间"></f7-list-item>
      <f7-list-item smart-select title="选择提货时间">
        <select name="fruits" v-model="models.options1_style">
          <option value="start">提货起始时间</option>
          <option value="cut">提货截止时间</option>
        </select>
      </f7-list-item>
      <f7-list-item v-if="models.options1_style==='start'">
        <label>自确认计划几日后提货</label>
        <input type="number" placeholder="请输入" v-model="models.start_date" />
      </f7-list-item>
      <f7-list-item v-if="models.options1_style==='cut'">

        <f7-list-item smart-select title="选择日期">
          <select name="fruits" v-model="models.options2_style">
            <option value="today">当日</option>
            <option value="morrow">次日</option>
          </select>
        </f7-list-item>
        
        <f7-list-item>
          <label>未按时提货扣款（元/吨）</label>
          <input type="number" placeholder="请输入" v-model="models.timeout_price" />
        </f7-list-item>

        <f7-list-item>
          <label>提货完成百分比不计扣款（</label>
          <input type="number" placeholder="请输入" v-model="models.not_count_price" />
        </f7-list-item>

      </f7-list-item>



      <f7-list-item>填写0时，物流可进行派车</f7-list-item>
      <f7-list-item title="司机交货截止时间">{{models.time_arrival}}</f7-list-item>
      <f7-list-item smart-select title="运费付款方式">
        <select name="fruits" v-model="models.payment_method">
          <option value="all_cash">装车立即付运费</option>
          <option value="all_goods">先运输后付运费</option>
          <option value="credit">先运输算日付运算</option>
        </select>
      </f7-list-item>
      <f7-list-item smart-select title="运费付款类型">
        <select name="fruits" v-model="models.payment_choice">
          <option value="transfer">银行转账</option>
          <option value="cash">现金付款</option>
        </select>
      </f7-list-item>
      <f7-list-item smart-select title="运费付款方">
        <select name="fruits" v-model="models.payment_obj">
          <option value="demand">发货方</option>
          <option value="supply">收货方</option>
          <option value="pass">物流方</option>
        </select>
      </f7-list-item>

      <f7-list-item>
        按一下过磅凭证结算运费
      </f7-list-item>


      <f7-list-item>
        <input type="radio" id="runoob" value="fact" v-model="models.weighProof.style">
        <label for="runoob">发货方</label>
        <input type="radio" id="runoob" value="get" v-model="models.weighProof.style">
        <label for="runoob">收货方</label>
        <!--<f7-list-item radio v-model="models.weighProof.style" name="style" value="fact" title="发货方" ></f7-list-item>-->
      </f7-list-item>

      <!--<f7-list-item v-if="models.weighProof.style=='fact'">-->
        <!--<div v-for="(v,k) in models.weighProof.fact">-->
          <!--<input type="checkbox" :value="v.text" :checked='v.checked' @click="getweighProof(v)">-->
          <!--<label for="runoob">{{v.text}}</label>-->
        <!--</div>-->
      <!--</f7-list-item>-->
      <f7-list-item>
        <div v-for="(v,k) in models.weighProof[models.weighProof.style]">
          <input type="checkbox" :value="v.text" :checked='v.checked' @click="getweighProof(v)">
          <label for="runoob">{{v.text}}</label>
        </div>
      </f7-list-item>

      <f7-list-item>运输途耗标准</f7-list-item>

      <f7-list-item>
        <label>合理路耗（%）</label>
        <input type="number" placeholder="0" v-model="models.hllh" />
      </f7-list-item>

      <f7-list-item>
        <label>扣款标准（元/吨）</label>
        <input type="number" placeholder="0" v-model="models.kkbz" />
      </f7-list-item>

      <f7-list-item>
        <input type="text" placeholder="models" />
        {{models}}
      </f7-list-item>

    </f7-list>
    <setProductType ref="setPrductType" @setProductTypeDone="setProductTypeDoneEmit"></setProductType>

    <setProductCategory ref="setProductCategory" @setProductCategoryDone="setProductCategoryDoneEmit" :product-category="mProductParam"></setProductCategory>
  </f7-page>

</template>

<script>
  import setProductType  from '../../components/setProductType.vue'
  import setProductCategory  from '../../components/setProductCategory.vue'
  import Storage from '../../utils/storage'
  let models={
    mytime:{
      time_depart:null,
      time_arrival:null
    },
    param:'',
    publish:'',//配置的发布报价 竞拍  采购的文字内容
    productDeail:{product: '', product_chn: ''},
    userInfo:'',
    companyInfo:'',
    desc:'',
    startAdd:null,
    endAdd:null,
    lh:true,//是否有路耗
    termOfValidity:new Date(new Date().getTime() + 1000*60*60),
    payment_method:'all_cash',
    payment_choice:'transfer',
    payment_obj:'demand',
    payment_methodIndex:1,
    options1_style:'start',
    options1:[
      {name:'提货起始时间',val:'start'},
      {name:'提货截止时间',val:'cut'}
    ],
    options2_style: 'today',
    options2:[
      {name:'当天',val:'today'},
      {name:'次日',val:'morrow'}
    ],
    selectTihuoTimed:null,
    selectTihuoDate:null,
    hasLj:false,
    weighProof:{
      style:'fact',
      get:[{ text: "过磅单", checked: true }, { text: "派车单", checked: false }],
      fact:[{ text: "过磅单", checked: true }, { text: "派车单", checked: false }]
    },
    start_date:0,
    payment_obj:'pass',
    product_categories:[{
          "pass_price":1,
          "pass_amount":0,
          "pass_unit":"",
          "product_name":[],
          "unit":"",

          "material":"",
          "material_chn":"",
          "layer_1":"",
          "layer_1_chn":"",
        }]

  }
  export default {
    // name: 'app',
    name: 'publishTrans',
    data: function () {
      return {
        models: models,
        productClassify:'',
        mProductParam: '',
        product_categories: models.product_categories
      }
    },
    methods: {
      getStore(){
        if(Storage.get('publishTrans')){
          this.models=Storage.get('publishTrans')
        }        
      },
      getweighProof: function (v) {
        v.checked=!v.checked;
      },
      selectAdds: function(v){
        // 存储cookie
        Storage.set('publishTrans', this.models)
        this.$f7.router.navigate('/mine/address/publishTrans.'+v)
        alert(v)
      },
      delogSetPrductType () {
        //模态框
        this.$refs.setPrductType.openPop()
      },
      delogSetPrductCategory () {
        //模态框
        this.$refs.setProductCategory.openPop()

      },
      setProductTypeDoneEmit (data) {
          this.productClassify=data.result;
          console.info('this', data)
          // productParam
          this.mProductParam=data.productParam
          if(!data.productParam['unit'] || data.productParam['unit'].length!=2){
            this.models.productDeail.product_chn='请选择至最小分类'
            return false;
          }
                   
          if(this.productClassify.length>0){
            this.models.productDeail['product'] = this.productClassify;
            this.models.productDeail['product_chn']='';
            // 获取产品选择类
            for(let i of this.models.productDeail['product']){
              if(i.chn){
                this.models.productDeail['product_chn'] += i.chn;
              }              
            }
            // 拼product_categories结构
            this.product_categories[0].material=this.productClassify[0].eng
            this.product_categories[0].material_chn=this.productClassify[0].chn
            for(let i=1 ; i<=this.productClassify.length; i++){
              if(this.productClassify[i] && this.productClassify[i].eng){
                this.product_categories[0]['layer_'+i]=this.productClassify[i].eng;
                this.product_categories[0]['layer_'+i+'_chn']=this.productClassify[i].chn;
              }else{
                break;
              }              
            }
          }
          // 单位赋值
          if(this.mProductParam && this.mProductParam.unit && this.mProductParam.unit.length>0){
            for(let i=0; i<2; i++){
              if(this.mProductParam.unit[i] && this.mProductParam.unit[i]['name']){
                if('产品单位' === this.mProductParam.unit[i]['name']) {
                  this.product_categories[0].unit=this.mProductParam.unit[i]['unit'];
                }
                if('运输单位' === this.mProductParam.unit[i]['name']) {
                  this.product_categories[0].pass_unit=this.mProductParam.unit[i]['unit'];
                }
              }
              
            }
          }          
      },
      setProductCategoryDoneEmit (data){
        this.product_categories[0].product_name=JSON.parse(JSON.stringify(data.result))
        this.models.product_categories=this.product_categories
      }
    },
    components: {
      setProductType,
      setProductCategory
    },
    mounted () {
        //获取本地存储中的 models
        this.getStore()
      }
  }

  /*
{
      "product_categories":[
        {
            "pass_price":1,
            "pass_amount":null,
            "pass_unit":"吨",
            "product_name":[
                {
                    "name":"Q195",
                    "amount_unit":1,
                    "amount":null,
                    "measure_unit":[

                    ],
                    "attribute":[
                        {
                            "_id":"5b286ca2bef9db0818d5ad67",
                            "numbering":"403",
                            "name":"截面宽",
                            "double":false,
                            "vary":"",
                            "unit":"mm",
                            "value":"1"
                        },
                        {
                            "_id":"5b286ca2bef9db0818d5ad68",
                            "numbering":"404",
                            "name":"截面高",
                            "double":false,
                            "vary":"",
                            "unit":"mm",
                            "value":"2"
                        },
                        {
                            "_id":"5b286ca2bef9db0818d5ad69",
                            "numbering":"405",
                            "name":"长度",
                            "double":false,
                            "vary":"",
                            "unit":"米",
                            "value":"3"
                        }
                    ]
                }
            ],
            "unit":"吨",
            "material":"gangtie",
            "material_chn":"钢铁",
            "layer_1":"gangpi",
            "layer_1_chn":"钢坯",
            "layer_2":"fangpi",
            "layer_2_chn":"方坯"
        }
    ]
}

  */
</script>
<style scoped>
  .row {
    margin: 0px 10px;
  }

  .col-25 {
    float: left;
    text-align: center;
    position: relative;
    margin-bottom: 25px;
  }

  i.f7-icons {
    display: inherit;
    height: 30px;
  }

  .text-gray {
    font-family: verdana, 'Hiragino Sans GB', 'Microsoft Yahei', 微软雅黑,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    font-weight: 400;
    margin-top: 7px;
    font-size: 12px;
  }

  .text-purple {
    color: #a3a2f0;
  }

  .ios .navbar .right {
    margin-left: 10px;
    color: #fff;
    font-size: 14px;
  }

  .bg-master {
    position: relative;
    background: url('../../assets/img/bg-master.jpg') no-repeat center -53px;
    background-size: 100% 150px;
    padding-bottom: 15px;
  }

  .bg-master h2 {
    color: #fff;
    font-size: 20px;
    white-space: normal;
    display: inherit;
    padding: 12px 0 9px 24px;
    margin: 0;
  }

  .bg-master h4 {
    color: #fff;
    font-size: 12px;
    white-space: normal;
    display: inherit;
    padding: 0px 0 30px 24px;
    margin: 0;
  }

  .role-icon {
    vertical-align: middle;
    background: #9db7ff;
    color: #fff;
    font-size: 12px;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 10px;
  }

  .logo-icon {
    position: absolute;
    right: 24px;
    top: 9px;
    width: 80px;
    height: 80px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    background: #f0f0f0;
  }

  .logo-icons {
    width: 48px;
    height: 48px;
    border-radius: 100%;
  }

  .ios .card {
    margin: 0 24px 20px 24px;
    padding: 10px 10px;
    border-radius: 5px;
  }

  .text-center_tite {
    font-size: 16px;
    color: #333;
  }

  .text-center_footer {
    font-size: 12px;
    color: #666;
  }

  .text-center_footer span {
    margin-right: 3px;
  }

  .ios .card-header,
  .ios .card-footer {
    min-height: 40px;
    padding: 0px 15px;
    position: initial;
  }

  .item-face {
    position: absolute;
    right: 15px;
    top: 5px;
  }

  .text-gray2 {
    color: #e5e5e5;
    font-size: 12px;
    display: inherit;
  }

  .ios .list {
    margin: 0;
  }

  .ios .page {
    background: #fff;
  }
</style>